var dom = document.getElementById("p_columnarRow");
var myChart = echarts.init(dom);
var option;
option = {
	grid: {
		top: '20%',
		right: '2%',
		bottom: '13%',
		left: '7%'
	},
	legend: {
		//show: false
		orient: 'horizontal',
		x: '74%', //图例位置
		y: '6%',
		itemWidth: 12, //图例宽
		itemHeight: 12, //图例高
		itemGap: 50, //图例之间间距
		textStyle: {
			color: '#b1bcff', //更改坐标轴文字颜色
			fontSize: 15 //更改坐标轴文字大小
		},
		data: [{
				name: '目标销量',
				icon: 'rect',
			},
			{
				name: '实际销量',
				icon: 'rect',
			}
		]
	},
	xAxis: [{
		type: 'category',
		axisTick: { //x轴刻度尺  
			show: false
		},
		axisLine: { //x轴线条颜色
			show: true,
			lineStyle: {
				color: '#374186',
				width: 0.5
			}
		},
		axisLabel: { //x轴文字倾斜
			show: true,
			textStyle: {
				color: '#b1bcff', //更改坐标轴文字颜色
				fontSize: 15 //更改坐标轴文字大小
			}
		},
		crosshair: true,
		data: ['乌市', '克市', '石河子', '奎屯', '塔城', '伊犁', '阿勒泰', '博州', '昌吉', '吐鲁番', '哈密', '巴州', '阿克苏', '克州', '喀什', '玉田'],

	}],
	yAxis: [{
		type: 'value',
		name: '万',
		nameTextStyle: {
			padding: [0, 30, 5, 0], // y轴name位置
			color: '#b1bcff', //更改坐标轴文字颜色
			fontSize: 15 //更改坐标轴文字大小
		},
		splitLine: { //网格线
			show: true, //关闭网格线
			lineStyle: {
				color: '#374186',
				width: 0.5
			}
		},
		axisLabel: {
			show: true,
			textStyle: {
				color: '#b1bcff', //更改坐标轴文字颜色
				fontSize: 15 //更改坐标轴文字大小
			}
		},
	}],
	animationDuration: 3000,
	series: [{
			name: '目标销量',
			type: 'bar',
			//barWidth: 10, //柱形宽度
			itemStyle: { //柱形色
				normal: {
					color: '#3377ff'
				},
			},
			data: [20, 49, 70, 32, 25, 67, 56, 162.2, 32.6, 20.0, 6.4, 3.3, 32.6, 20.0, 6.4, 3.3]
		},
		{
			name: '实际销量',
			type: 'bar',
			//barWidth: 10, //柱形宽度
			itemStyle: { //柱形色
				normal: {
					color: '#e048ff'
				},
			},
			data: [26, 59, 90, 26, 28, 70, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 48.7, 18.8, 6.0, 2.3]
		}
	]
};
if (option && typeof option === 'object') {
	myChart.setOption(option);
};
